<template>
	<view class="content">
		<!-- 按钮 -->
		<view class="fixed-button-area">
			<view class="custom-style"v-if="storage_data!='create'">
				<u-button type="primary" :plain="true" text="新增" size="small" @click="handleAdd"></u-button>
			</view>
			<view class="custom-style">
				<u-button type="success" :plain="true" text="修改" size="small" @click="handleUpdate"
					:disabled="checkboxValue1.length<1"></u-button>
			</view>
			<view class="custom-style" v-if="storage_data!='create'">
				<u-button type="warning" :plain="true" text="删除" size="small" @click="handleDelete"
					:disabled="checkboxValue1.length<1"></u-button>
			</view>
			<view class="custom-style" v-if="storage_data!='create'">
				<u-button type="primary" :plain="true" text="解锁" size="small" @click="handleUnlock"
					:disabled="checkboxValue1.length<1"></u-button>
			</view>
			<view class="custom-style" v-if="storage_data!='create'">
				<u-button type="primary" :plain="true" text="重置密码" size="small" @click="handleResetPwd"
					:disabled="checkboxValue1.length<1"></u-button>
			</view>
			<view class="custom-style">
				<u-button type="primary" :plain="true" text="刷新" size="small" @click="getList"></u-button>
			</view>
			<!-- <view style="margin: 0 20rpx;">
				<u-icon name="reload" @click="getList" size="28"></u-icon>
			</view> -->
		</view>
		<!-- 列表 -->
		<view class="list-container" :style="{top:storage_data=='create'? '40px':'86px'}">
			<u-list ref="listRef" pagingEnabled="true" enableBackToTop="true" @scroll="onscroll" :scrollTop="scrollTop"
				class="list-inner">
				<u-list-item :key="index" v-for="(item,index) in userList">
					<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange(item)">
						<uni-card :is-shadow="true">
							<u-row customStyle="margin-bottom: 10px">
								<u-checkbox :customStyle="{marginBottom: '8px'}" :key="index" label=" "
									:name="item.userName">
								</u-checkbox>
							</u-row>
							<u-row customStyle="margin-bottom: 10px">
								<u-col span="4">
									<view class="demo-layout bg-purple-light">账号类别</view>
								</u-col>
								<u-col span="8">
									<view class="demo-layout ">{{item.numType?item.numType:''}}</view>
								</u-col>
							</u-row>
							<u-row customStyle="margin-bottom: 10px">
								<u-col span="4">
									<view class="demo-layout bg-purple-light">登录账号</view>
								</u-col>
								<u-col span="8">
									<view class="demo-layout ">{{item.userName?item.userName:''}}</view>
								</u-col>
							</u-row>
							<u-row customStyle="margin-bottom: 10px">
								<u-col span="4">
									<view class="demo-layout bg-purple-light">用户姓名</view>
								</u-col>
								<u-col span="8">
									<view class="demo-layout ">{{item.nickName?item.nickName:''}}</view>
								</u-col>
							</u-row>
							<u-row customStyle="margin-bottom: 10px">
								<u-col span="4">
									<view class="demo-layout bg-purple-light">角色</view>
								</u-col>
								<u-col span="8">
									<view class="demo-layout ">{{item.roles[0].roleName?item.roles[0].roleName:''}}
									</view>
								</u-col>
							</u-row>
							<u-row customStyle="margin-bottom: 10px">
								<u-col span="4">
									<view class="demo-layout bg-purple-light">手机号码</view>
								</u-col>
								<u-col span="8">
									<view class="demo-layout ">{{item.phonenumber?item.phonenumber:''}}</view>
								</u-col>
							</u-row>
							<u-row customStyle="margin-bottom: 10px">
								<u-col span="4">
									<view class="demo-layout bg-purple-light">任务数量</view>
								</u-col>
								<u-col span="8">
									<view class="demo-layout ">{{item.number?item.number:''}}</view>
								</u-col>
							</u-row>
							<u-row customStyle="margin-bottom: 10px">
								<u-col span="4">
									<view class="demo-layout bg-purple-light">发送次数</view>
								</u-col>
								<u-col span="8">
									<view class="demo-layout ">{{item.sendCount?item.sendCount:''}}</view>
								</u-col>
							</u-row>
							<u-row customStyle="margin-bottom: 10px">
								<u-col span="4">
									<view class="demo-layout bg-purple-light">创建时间</view>
								</u-col>
								<u-col span="8">
									<view class="demo-layout ">{{item.createTime?item.createTime:''}}</view>
								</u-col>
							</u-row>
						</uni-card>
					</u-checkbox-group>
					<!-- </u-cell> -->
				</u-list-item>
			</u-list>
			<!-- <l-pagination v-model="queryParams.pageNum" :total="total" :page-size="queryParams.pageSize"
				:pager-count="3" @change="changes" v-if="total>0" /> -->
		</view>

		<!-- 新增、修改模态框 -->
		<u-modal :show="show" :title="title" @confirm="confirm" @cancel="cancel" showCancelButton="true">
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm" :labelWidth='90'>
				<u-form-item label="用户姓名" prop="nickName" borderBottom ref="item1" required="true">
					<u--input v-model="model1.nickName" placeholder="请输入用户姓名" showWordLimit="true" maxlength="6"
						clearable></u--input>
				</u-form-item>
				<u-form-item label="手机号码" prop="phonenumber" borderBottom ref="item1">
					<u--input v-model="model1.phonenumber" placeholder="请输入手机号码" clearable showWordLimit :disabled="storage_data=='create'"
						maxlength="11"></u--input>
				</u-form-item>
				<u-form-item label="登录账号" prop="userName" borderBottom ref="item1" required="true">
					<u--input v-model="model1.userName" placeholder="请输入登录账号" clearable showWordLimit :disabled="storage_data=='create'"
						maxlength="20"></u--input>
				</u-form-item>
				<u-form-item label="登录密码" prop="password" borderBottom ref="item1" required="true">
					<u--input v-model="model1.password" placeholder="请输入登录密码" clearable :disabled="storage_data=='create'"></u--input>
				</u-form-item>
				<u-form-item label="账号类别" prop="numType" borderBottom ref="item1">
					<uni-data-select v-model="model1.numType" :localdata="range1" @change="change1" :disabled="storage_data=='create'"
						placeholder="请选择账号类别"></uni-data-select>
				</u-form-item>
				<u-form-item label="角色" prop="roleIds" borderBottom ref="item1">
					<!-- <uni-data-select v-model="model1.roleIds" :localdata="range" @change="change"
						placeholder="请选择角色"></uni-data-select> -->
					<u--input v-model="role" disabled="true"></u--input>
				</u-form-item>

				<u-form-item label="任务数量" prop="number" borderBottom ref="item1">
					<u--input v-model="model1.number" placeholder="请输入任务数量" :disabled="storage_data=='create'"></u--input>
				</u-form-item>
				<u-form-item label="发送次数" prop="sendCount" borderBottom ref="item1">
					<u--input v-model="model1.sendCount" placeholder="请输入发送次数" :disabled="storage_data=='create'"></u--input>
				</u-form-item>
				<u-form-item label="状态" prop="status" borderBottom ref="item1">
					<u-radio-group v-model="model1.status" placement="row" @change="groupChange">
						<u-radio :customStyle="{marginBottom: '8px',marginRight:'50px'}" size="25" :disabled="storage_data=='create'"
							v-for="(item, index) in radiolist1" :key="index" :name="item.name" @change="radioChange"
							:label="item.name">
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</u--form>
		</u-modal>
		<!-- 删除模态框 -->
		<u-modal :show="showDetle" title="系统提示" :content='content' @confirm="confirmDetle" @cancel="cancelDetle"
			showCancelButton="true"></u-modal>
		<!-- 解锁 -->
		<u-modal :show="showUnlock" title="系统提示" :content='contentUnlock' @confirm="confirmUnlock"
			@cancel="cancelUnlock" showCancelButton="true"></u-modal>
		<!-- 重置密码 -->
		<u-modal :show="showResetPwd" title="重置密码" :content='contentResetPwd' @confirm="confirmResetPwd"
			@cancel="cancelResetPwd" showCancelButton="true">
			<!-- <u--input placeholder="请输入新密码"  v-model="password" :customStyle="{marginBottom: '30px'}"></u--input> -->
			<!-- <input type="text" v-model="password" placeholder="请输入新密码" /> -->
			<uni-easyinput v-model="password" placeholder="请输入新密码" />
		</u-modal>
		<u-loading-page :loading="showLoading"></u-loading-page>
		<u-back-top :scroll-top="innerScrollTop" top="100" @click="changes"></u-back-top>
		<tabBar selectedIndex=1 v-if="storage_data=='create'"></tabBar>
		<tabBar selectedIndex=0 v-else></tabBar>
	</view>
</template>

<script>
	import {
		listUser,
		getUser,
		addUser,
		delUser,
		resetUserPwd,
		unlockLogininfor,
		updateUser
	} from '@/api/system/user.js'
	import {
		getDicts
	} from '@/api/system/dict/data.js'
	export default {
		data() {
			return {
				show: false,
				title: '标题',
				content: '',
				model1: {
					nickName: '',
					roleIds: [],
					numType: '',
					userName: '',
					password: '123456',
					status: '',
					number: 100,
					sendCount: 1
				},
				rules: {
					'nickName': {
						type: 'string',
						required: true,
						message: '请输入用户姓名',
						trigger: ['blur', 'change']
					},
					'userName': {
						type: 'string',
						required: true,
						message: '请输入登录账号',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						message: '请输入登录密码',
						trigger: ['blur', 'change']
					},
				},
				// 基本案列数据
				radiolist1: [{
						name: '正常',
						disabled: false
					},
					{
						name: '停用',
						disabled: false
					},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '正常',
				checkboxValue1: [],
				showDetle: false,
				range: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 999,
					userName: undefined,
					phonenumber: undefined,
					status: undefined,
					deptId: undefined
				},
				userList: [],
				range1: [],
				roleIds: [],
				row: {},
				showButton: true,
				total: 0,
				role: '',
				userName: '',
				showLoading: true,
				selectName: '',
				contentUnlock: '',
				showUnlock: false,
				password: '',
				showResetPwd: false,
				scrollTop: 0,
				innerScrollTop: 0,
				buttonAreaHeight: 86, // 按钮区域高度，与CSS中保持一致
				storage_data: '',
			}
		},
		created() {
			this.storage_data = uni.getStorageSync('storage_data').user_roles[0];
			this.getList()
		},
		onShow() {
			this.getList()
		},
		watch: {
			checkboxValue1(newVal) {
				console.log('当前选中项:', newVal);
			}
		},
		onReady() {
			uni.hideTabBar() //隐藏导航栏方法
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.getList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			onscroll(e) {
				// console.log('onscroll:', e);
				// this.scrollTop = e
				this.innerScrollTop = e
			},
			/** 解锁按钮操作 */
			handleUnlock() {
				// const username = this.selectName
				this.contentUnlock = '是否确认解锁用户"' + this.userName + '"账号?'
				this.showUnlock = true
				// this.$modal.confirm('是否确认解锁用户"' + username + '"数据项?').then(function() {
				//   return unlockLogininfor(username)
				// }).then(() => {
				//   this.$modal.msgSuccess('用户' + username + '解锁成功')
				// }).catch(() => {
				// })
			},
			confirmUnlock() {
				this.showUnlock = false;
				console.log('点击确认')
				unlockLogininfor(this.userName).then(res => {
					uni.showToast({
						title: '解锁成功',
						duration: 2000
					});
					this.checkboxValue1 = []
					this.getList()
				})
			},
			cancelUnlock() {
				this.showUnlock = false;
			},
			// 重置密码操作
			handleResetPwd() {
				// const username = this.selectName
				this.contentUnlock = '请输入"' + this.row.nickName + '"的新密码?'
				this.showResetPwd = true
				this.password = ''
			},
			confirmResetPwd() {
				this.showResetPwd = false;
				console.log('点击确认')
				resetUserPwd(this.row.userId, this.password).then(res => {
					uni.showToast({
						title: '重置成功',
						duration: 2000
					});
					this.checkboxValue1 = []
					this.getList()
				})
			},
			cancelResetPwd() {
				this.showResetPwd = false;
			},
			changes() {
				// console.log('e', e)
				// this.queryParams.pageNum = e
				// this.userList=[]
				// this.getList()
				this.scrollTop = this.innerScrollTop
				this.$nextTick(() => {
					this.scrollTop = 0
				})
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300 // 滚动动画时长，单位ms
				})

			},
			change() {
				console.log('this.model1.roleIds', this.model1.roleIds)
				// let arr=[]
				// this.roleIds.push(this.model1.roleIds)
				// this.model1.roleIds=arr
				// console.log('this.model1.roleIds', this.roleIds)
			},
			change1() {
				console.log('this.model1.numType', this.model1.numType)
			},
			getList() {
				let that = this
				that.showLoading = true
				listUser(that.queryParams).then(res => {
					console.log('res', res)
					// setTimeout(() => {
					that.showLoading = false
					// }, 1000)
					that.userList = res.rows
					that.total = res.total
				})
			},
			checkboxChange(n) {
				console.log('change', n);
				this.userName = n.userName

				// this.this.selectName
				if (n) {
					this.showButton = false
				} else {
					this.showButton = true
				}
				this.row = n
			},
			groupChange(n) {
				console.log('groupChange', n);
				// if (n == '正常') {
				// 	this.model1.status = 0
				// } else {
				// 	this.model1.status = 1
				// }
			},
			radioChange(n) {
				console.log('radioChange', n);
				// if (n == '正常') {
				// 	this.model1.status = 0
				// } else {
				// 	this.model1.status = 1
				// }
			},
			handleAdd() {
				this.show = true;
				this.title = '新增人员'
				this.model1 = {
					nickName: '',
					roleIds: [3],
					numType: '',
					userName: '',
					password: '123456',
					status: '',
					number: 100,
					sendCount: 1,
					postIds: []
				}

				// this.roleIds = [3]
				this.role = "发起人"
				getUser('').then(res => {
					// this.model1.postIds=res.postIds
					console.log('res', res.roles)
					this.range = res.roles.map(item => {
						return {
							value: item.roleId,
							text: item.roleName
						}
					})
					console.log('this.range', this.range)
				})
				getDicts('type_number').then(res => {
					this.range1 = res.data.map(item => {
						return {
							value: item.dictValue,
							text: item.dictLabel
						}
					})
				})
			},
			handleUpdate() {
				this.show = true;
				this.title = '修改人员信息'
				// if(uni.getStorageSync('storage_data').user_roles[0]=='management'){
				// 	this.roleIds = [2]
				// 	this.role = "管理员"
				// }else{
				// 	this.roleIds = [3]
				// 	this.role = "发起人"
				// }
				// this.roleIds = [4]
				// this.role =  this.row.roles[0].roleName

				getUser(this.row.userId).then(res => {
					if (res.roleIds[0] == 3) {
						this.model1.roleIds = [3]
						this.role = '发起人'
					} else if (res.roleIds[0] == 4) {
						this.model1.roleIds = [4]
						this.role = '排查人'
					} else {
						this.model1.roleIds = [2]
						this.role = '管理员'
					}
					this.model1.roleIds = res.roleIds
					this.model1.postIds = res.postIds
					// console.log('res', res.roles)
					this.range = res.roles.map(item => {
						return {
							value: item.roleId,
							text: item.roleName
						}
					})
					// console.log('this.range', this.range)
				})
				getDicts('type_number').then(res => {

					this.range1 = res.data.map(item => {
						return {
							value: item.dictValue,
							text: item.dictLabel
						}
					})
				})
				this.model1 = this.row
				this.model1.numType = this.row.numType == '现场排查' ? '0' : (this.row.numType == '便捷考培' ? '1' : '2')
				this.model1.password = '123456'
				this.model1.status = this.row.status == 0 ? '正常' : '停用'
				console.log('this.model1', this.model1)

			},
			handleDelete() {
				this.content = '是否确认删除账号为' + this.userName + '的用户？'
				this.showDetle = true
			},
			confirm() {

				console.log('点击确认', this.model1)
				// this.model1.numType = this.model1.numType.toString()
				// this.model1.roleIds = this.roleIds
				if (this.model1.status == '正常') {
					this.model1.status = 0
				} else {
					this.model1.status = 1
				}
				this.$refs.uForm.validate().then(res => {
					this.show = false;
					uni.$u.toast('校验通过')
					if (this.row.userId != undefined) {
						updateUser(this.model1).then(response => {
							uni.showToast({
								title: '修改成功',
								duration: 2000
							});
							this.open = false
							this.$store.dispatch('GetInfo').then(res => {})
							this.getList()
						})
					} else {
						addUser(this.model1).then(response => {
							uni.showToast({
								title: '新增成功',
								duration: 2000
							});
							this.open = false
							this.getList()
						})
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
					console.log('errors', errors)
				})

			},
			cancel() {
				this.show = false;
				console.log('点击取消')
			},
			confirmDetle() {
				this.showDetle = false;
				console.log('点击确认')

				delUser(this.row.userId).then(res => {
					uni.showToast({
						title: '删除成功',
						duration: 2000
					});
					this.checkboxValue1 = []
					this.getList()
				})
			},
			cancelDetle() {
				this.showDetle = false;
				console.log('点击取消')
			},
		},
	}
</script>

<style scoped>
	.content {
		min-height: 100vh;
		/* overflow-y: auto; */
		position: relative;
	}

	.fixed-button-area {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		background: #fff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		display: flex;
		flex-wrap: wrap;
	}

	.contentButton {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 20rpx;
		flex-wrap: wrap;
		height: 86px;
		display: flex;
		align-items: center;
		padding: 0 16px;
	}

	/* 列表容器 */
	.list-container {
		/* margin-top 通过动态样式设置 */
		min-height: calc(100vh - 186px);
		/* 确保最小高度 */
		position: absolute;
		
		padding-bottom: 100px;
		width: 100%;
	}

	.list-inner {
		height: 100%;
	}

	.custom-style {
		width: 200rpx;
		margin: 5px 20rpx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.u-list {
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>